<template>
  <div class="list">
    <div class="bottom">
      <router-link :to="`/details/${item.id}`" tag="div"  v-for="item in itemArr" :key="item.id" class="list">
        <img :src="item.coverImgUrl" alt="">
        <p :title="item.name">{{cutString(item.name)}}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    itemArr: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    cutString (str) {
      if (str.length > 14) {
        return str.substring(0, 14) + '...'
      }
      return str
    }
  }
}
</script>

<style lang="less" scoped>
.bottom{
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  .list{
    float: left;
    margin-left: 45px;
    margin-top: 20px;
    cursor: pointer;
    img{
      width:300px;
    }
    p{
      font-size: 20px;
    }
  }
}
</style>
